☰ Menu

Y7 - SU1.4 - Adding Images to a webpage

⏱️ Do It Now

Create a OneNote Page and copy this into the title:

Lesson 4 - Summer 1 - Adding images to a webpage



Copy this into a OneNote Page and complete it

📝 Do It Now

Answer each of the following:

(1) List the different HTML tags you used last lesson


(2) Explain why HTML tags come in pairs


(3) Discuss the difference between HTML and CSS



Extension:

Explain why HTML is a markup language and not a programming language


🎯 Learning Objectives


  • LO1: Learn how to export a web graphic and upload it to a website directory
  • LO2: Learn how embed an image on a webpage; using the <img> tag
  • LO3: Learn how to edit the attributes of an image tag

🎥 Export Your Website Banner

(1) Work with This video to learn how to export your website banner, ready to upload to your website directory


➡️ Next Slide ➡️

🎥 Upload Your Website Banner

(2) Work with This video to learn how to upload your website banner to an images folder in VSCODE


➡️ Next Slide ➡️

🎥 Add your website banner to your webpage

(3) Work with This video to learn how to embed the image you have uploaded onto your webpage.


➡️ Next Slide ➡️

📝 Independent Activity

Instructions:

  • Ensure you have added all of your graphics to your website
  • Create new graphics and add these as well
  • Make further edits to the HTML and CSS of your website